<template>
  <div v-if="visible" class="gis-search position-left" @click.stop>
    <a-input-search
      v-model="searchKey"
      placeholder="请输入行政区"
      style="width: 182px;"
      @search="onSearch"
    />
    <div class="close-icon" @click="closeSearch">
      <a-icon-font type="iconicon-beifen1" />
    </div>
  </div>
</template>

<script lang="ts">
/**
 * 搜索地图
 */
import { Component, Watch, Vue, Prop } from 'vue-property-decorator'
import GisStore from '@/store/modules/gis'
import Draggabilly from 'draggabilly'
import { key } from '@/components/gis/map-package/map-config'

@Component({
  components: {},
})
export default class GisSearch extends Vue {
  @Prop({ type: Boolean, default: false }) visible!: boolean
  public drag: any = null
  public searchKey: string | null = null

  @Watch('visible', { immediate: true })
  private watchVisible(value: boolean) {
    const that = this
    if (value) {
      setTimeout(() => {
        const $overlay = document.querySelector(
          '.gis-map-component'
        ) as HTMLDivElement
        const $element = document.querySelector('.gis-search') as HTMLDivElement
        that.drag = new Draggabilly($element, {
          containment: $overlay,
          grid: [1, 1],
        })
      }, 500)
    }
  }

  public async onSearch() {
    const parameters: any = {
      postStr: {
        searchWord: this.searchKey,
        searchType: '1',
        needSubInfo: false,
        needAll: false,
        needPolygon: true,
        needPre: true,
      },
      tk: key,
    }
    const response: any = await GisStore.searchAdministrative(parameters)
    if (response.data.returncode === '100') {
      const { bound } = response.data.data[0]
      if (bound) {
        const [lat1, lnt1, lat2, lnt2] = bound.split(',')
        const boundArray: any[] = [
          [lat1, lnt1],
          [lat2, lnt2],
        ]
        this.$emit('fit-bounds', boundArray)
      } else {
        this.$message.warning('暂时无法定位！')
      }
    } else {
      this.$message.warn(response.data.msg)
    }
  }

  public closeSearch() {
    GisStore.setCurrentToolBarAction(null)
  }
}
</script>

<style scoped lang="less">
.position-left {
  left: 225px;
}

.gis-search {
  align-items: center;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.18);
  display: flex;
  height: 48px;
  justify-content: space-between;
  padding: 0 12px;
  position: absolute;
  top: 1px;
  width: 235px;

  // 搜索框圆角
  /deep/ .ant-input-affix-wrapper {
    .ant-input {
      border-radius: 16px;
    }
  }

  .close-icon {
    align-items: center;
    border-radius: 2px;
    color: rgb(93, 99, 126);
    cursor: pointer;
    display: flex;
    font-size: 16px;
    padding: 4px;
    position: relative;
    user-select: none;
  }
}
</style>
